<template>
  <div>
    <h3 class="title">云手机体验质量评测APP-触控体验指标</h3>
<!--    <el-select v-model="value" placeholder="请选择测评类型">-->
<!--      <el-option-->
<!--          v-for="item in options"-->
<!--          :key="item.value"-->
<!--          :label="item.label"-->
<!--          :value="item.value">-->
<!--      </el-option>-->
<!--    </el-select>-->
<!--    <el-date-picker-->
<!--        v-model="value2"-->
<!--        type="datetimerange"-->
<!--        :picker-options="pickerOptions"-->
<!--        range-separator="至"-->
<!--        start-placeholder="开始日期"-->
<!--        end-placeholder="结束日期"-->
<!--        align="right"-->
<!--        style="margin-left: 10px;">-->
<!--    </el-date-picker>-->
<!--    <el-button type="primary" style="margin-left: 10px" class="el-icon-circle-check" @click="searchTouch">查询</el-button>-->
    <el-button type="primary" style="float: right;margin-left: 10px" class="el-icon-download" @click="serverInfoExport">导出</el-button>
    <el-button type="primary" style="float: right" class="el-icon-refresh" @click="refresh">刷新</el-button>

    <el-table
        class="InfoData"
        :data="this.$dataPage(this.touchData,this.currentPage,this.pageSize).pageData"
        :header-cell-style="this.$handleheader"
        :row-style="this.$rowstyle"
        :cell-style="this.$cellstyle"
        border
    >
<!--      <el-table-column-->
<!--          prop="kpiTouchId"-->
<!--          label="平台id"-->
<!--          width="100"-->
<!--      >-->
<!--      </el-table-column>-->
      <el-table-column
          prop="id"
          label="编号"
          width="80"
          header-align="center"
          sortable
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="touch_time_delay"
          label="触屏响应时延"
          width="120"
          sortable
          header-align="center"
      >
      </el-table-column>
      <el-table-column
          prop="touch_accuracy"
          label="点击灵敏度(%)"
          width="160"
          header-align="center"
          sortable
      >
      </el-table-column>
<!--      <el-table-column-->
<!--          prop="touch_score"-->
<!--          label="触控体验分数"-->
<!--          width="160"-->
<!--          header-align="center"-->
<!--          sortable-->
<!--      >-->
<!--      </el-table-column>-->
      <el-table-column
          prop="ip"
          label="IP地址"
          width="150"
          header-align="center"
          sortable
      >
      </el-table-column>
      <el-table-column
          prop="port"
          label="端口"
          width="120"
          header-align="center"
      >
      </el-table-column>
      <el-table-column
          prop="time"
          label="测评时间"
          width="200"
          sortable
          header-align="center"
      >
      </el-table-column>
      <el-table-column
          prop="platform_name"
          label="视频/指令流"
          header-align="center"
      />
    </el-table>
<!--    <el-pagination-->
<!--        style="margin-left: 30px;  margin-top: 10px; text-align: right"-->
<!--        background-->
<!--        layout="total, prev, pager, next"-->
<!--        :current-page="currentPage"-->
<!--        :page-size="pageSize"-->
<!--        :total="total"-->
<!--        @current-change="handleCurrentChange">-->
<!--    </el-pagination>-->
<!--    这里将分页组件抽象出去了-->
    <page :current-page="currentPage" :page-size="pageSize" :total="total" @handleChange="handleCurrentChange"></page>
    <div style="width: 100%; margin: 10px auto;height: 70%;font-weight: 200;font-size: 10px;color: red">触控体验指标说明：<br>（1）触屏响应时延为触屏点击正确响应的比率（%）；<br>（2）点击灵敏度为从触控到设备响应的时间（ms）。</div>
<!--    <div style="height: 450px;width: 100%;" id="container"></div>-->
    <el-dialog
        title="导出信息填写"
        :visible.sync="exportVisible"
        width="30%"
        :show-close="false"
        :close-on-click-modal="false">

      <el-form ref="form" :model="exportForm" label-width="80px" inline :rules="exportRules">
        <el-form-item label="文件名" prop="name">
          <el-input v-model="exportForm.name"></el-input>
        </el-form-item>
<!--        <el-form-item label="高度" prop="height">-->
<!--          <el-input v-model="exportForm.height"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="宽度" prop="width">-->
<!--          <el-input v-model="exportForm.width"></el-input>-->
<!--        </el-form-item>-->
      </el-form>
<!--      <span style="color: red">*高度建议不超过500，宽度不超过1000</span>-->
      <span slot="footer" class="dialog-footer">
    <el-button @click="exportVisible = false">取 消</el-button>
    <el-button type="primary" @click="startExport('touch',touchData,'touchData'),exportVisible = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { Line } from '@antv/g2plot';
import Page from "@/components/page";
import {exportMixin, mixin} from "../components/mixin";
import {touchList} from "@/api/exp";
import moment from "moment";
export default {
  name: "touch",
  components: {Page},
  data(){
    return{
      pickerOptions: {
        shortcuts: [
          {
            text: '最近1小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近3小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 3);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近12小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 12);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近1天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近7天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, ]
      },
      value2:'',
      touchData: null,
      // total: null,
      // currentPage:1,
      // pageSize: 2,
      options: this.$store.state.testType,
      value: '',
      line:null,
      graphData:null
    }
  },
  created() {
    this.initData()
  },
  mixins:[mixin,exportMixin],
  methods:{
    initData() {
      touchList().then(res=>{
      // axios.get(this.$ip2 + '/experience/touch/list').then(res=>{
        console.log(res);
        this.touchData = res.data
        this.total = res.data.length
        //手动增加编号
        for (let i =0;i<res.data.length;i++){
          res.data[i].time = moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')
          this.touchData[i].id = i + 1
        }
      })
    },
    refresh() {
      this.initData()
    },
    handleCurrentChange(val) {
      // 处理分页点击
      this.currentPage = val
    },
    searchTouch() {
      // 拿数据画图

      this.initChart()
    },
    serverInfoExport() {
      this.exportVisible = true
    },
    // 画图
    initChart(){
      this.line = new Line('container', {
        data:this.graphData,
        xField: 'year',
        yField: 'value',
        seriesField: 'category',
        xAxis: {
          type: 'time',
        },
        yAxis: {
          label: {
            // 数值格式化为千分位
            formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
          },
        },
      });

      this.line.render();
    }
  },
  mounted() {
    // this.$refs.handleChange.$on('handleChange',this.handleCurrentChange)
    // this.page(this.currentPage)
  }
}
</script>

<style scoped>

</style>
